<style>
.container-box{
    display: flex;
    flex-direction: column;

}
.header-box{
    height: 50px;
    background: url('../images/img/ditu@2x.png') !important;
    background-size: 100% 100%;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
    .add-container{
        flex: 1;
       
        padding: 10px;

    }
    
    .add-container label{
        text-align: left!important;

    }
    .addbtn{
        width: 100%;
        height: 50px;
        position: fixed;
        left: 0;
        bottom: 0;
        background: url('../images/img/button_di1@2x.png') !important;
        border-radius: 0!important;
        background-size: 100% 100%;

        
    }
    .addbtn span{
        font-size: 16px;
        color: #fff;
    }
    .displayPrice>label{
        width: 150px!important;
    }
    /*.discount>label{
        width: 100px!important;
    }*/
    .discountinput{
        width: 90%!important;
    }
    .ivu-form-item-content{}

</style>

<template>
 <Form class="container-box"  ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<div class="add-container">
   
        <Form-item label="骑手姓名" prop="userName">
            <Input v-model="formValidate.userName" placeholder="请输入骑手姓名"></Input>
        </Form-item>
        <Form-item label="身份证号" prop="userCardNo">
            <Input v-model="formValidate.userCardNo" placeholder="请输入身份证号"></Input>
        </Form-item>
        <Form-item label="手机号码" prop="userMobileNo">
            <Input v-model="formValidate.userMobileNo" placeholder="请输入手机号码"></Input>
        </Form-item>
       
        <!-- <Form-item class="discount" label="抽成比例" prop="discount">
               <Input class="discountinput" v-model="formValidate.discount" placeholder="负责人抽成比例"></Input> %
        </Form-item>  
        <Form-item class="displayPrice" label="骑手端是否显示价格" prop="displayPrice"  >
            <Radio-group v-model="formValidate.displayPrice">
                <Radio label="1">是</Radio>
                <Radio label="0">否</Radio>
            </Radio-group>
        </Form-item> -->
       
          <!--   <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
</div>
    
 <Button class="addbtn"  @click="handleSubmit('formValidate')">提交</Button>
 </Form>
    
</template>
<script>

    export default {
        data () {
            const userMobileNo = (rule, value, callback) => {
                if (!(/^1[0-9]{10}$/.test(value))) {
                    callback(new Error('请输入正确手机号'));
                } else {
                    callback();
                }



            };
            return {
                formValidate: {
                    userName: '',
                    userCardNo:'',
                    userMobileNo:'',
                    userToken:'',
                    displayPrice:'0',
                    discount :''
                },
                ruleValidate: {
                    userName: [
                        { required: true, message: '骑手姓名不能为空', trigger: 'blur' }
                    ],
                    userCardNo: [
                        { required: true, message: '请输入身份证号', trigger: 'blur' },
                    ],
                    userMobileNo: [
                        { required: true, validator: userMobileNo, trigger: 'blur' }
                    ],
                    inviteCodeId: [
                        { required: true, message: '请选择骑手负责人', trigger: 'change' }
                    ]
                    // ,displayPrice: [
                    //     { required: true, message: '请选择骑手端是否显示价格', trigger: 'change' }
                    // ],
                    // discount: [
                    //    { required: true,message: '负责人抽成比例', trigger: 'blur' }
                    // ]
                }
            }
        },
        mounted: function () {
            var that=this
           /*这段代码是固定的，必须要放到js中*/
            this.setupWebViewJavascriptBridge(function(bridge) {
                    bridge.registerHandler('userToken', function(data, responseCallback) {
                        that.$data.formValidate.userToken=encodeURIComponent(data.userToken);
                        responseCallback({'statusCode': '0', 'msg': '我收到你发的消息了','data':data})
                   })
                
            })
           
            if(this.$route.query.id){
                this.$data.formValidate.userToken=encodeURIComponent(this.$route.query.id);
            }
            
        },
        methods: {
            
            setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) {
                    callback(WebViewJavascriptBridge)
                } else {
                    document.addEventListener(
                        'WebViewJavascriptBridgeReady',
                        function() {
                            callback(WebViewJavascriptBridge)
                        },
                        false
                    );
                }

                if (window.WVJBCallbacks) {
                    return window.WVJBCallbacks.push(callback);
                }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() {
                    document.documentElement.removeChild(WVJBIframe)
                }, 0)
            },
            handleSubmit (name) {
                var urlbase='/hlsdv1/client/houseman/appAddHorseman.act'; 
               
                var url=urlbase+'?userName='+this.$data.formValidate.userName+'&userCardNo='+this.$data.formValidate.userCardNo+'&userMobileNo='+this.$data.formValidate.userMobileNo+'&userToken='+this.$data.formValidate.userToken+'&displayPrice='+this.$data.formValidate.displayPrice+'&discount='+this.$data.formValidate.discount
                var that=this
                this.$refs[name].validate((valid) => {

                    if (valid) {
                         
                        this.$http({
                          url: url
                       }).then(function(res){
                          console.log(res.data.statusCode)
                        
                          if(res.data.statusCode){
                            that.$Message.error(res.data.message);
                          }else{
                              that.$Modal.success({title:'互联速递' ,content: res.data.message,onOk:function(){
                                   that.$refs[name].resetFields();
                                }});
                          }
                        })
                        .catch(function(err){
                         that.$Message.error('请检查网络环境');
                        })
                        console.log(this.$data.formValidate)
                    } else {
                        this.$Message.error('请正确填写信息!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>